<template>
  <div class="musiclist">
    <div class="back" @click = "back">
      <i class="icon-houtui-normal"></i>
    </div>
    <h1 class="title">{{title}}</h1>
    <div class="bg-image" ref="bgImage" :style="bgStyle">
      <div class="play-wrapper">
        <div class="playBtn" ref="playBtn">
          <i class="icon-random-normal"></i>
          <span class="text">随机播放全部</span>
        </div>
      </div>
      <div class="fliter"></div>
    </div>
    <div class="bg-layer" ref="layer"></div>
    <scroll class="list" ref="list" :data = "songs" 
    :probeType = "probeType"
    :listenScroll = "listenScroll"
    @scroll = "scroll">
      <div class="songlist-wrapper">
        <songlist :rank = "rank" :songlist = "songs" @selectItem = "selectItem"></songlist>
      </div>
      <div v-show="!songs.length" class="loading-container">
        <loading></loading>
      </div>
    </scroll>
  </div>
</template>

<script>
import songlist from 'base/songlist/songlist.vue';
import scroll from 'base/scroll/scroll.vue';
import {prefixStyle} from "commom/js/dom.js";
import {mapActions,mapMutations} from 'vuex'
import {getplaysongkey} from "api/song.js"
import loading from "base/loading/loading.vue"
import {playListMixin} from "commom/js/mixin.js"
const RESERVED_HEIGHT = 40;
const transform = prefixStyle('transform');
export default {
  mixins:[playListMixin],
  components: { songlist },
  data(){
    return {
      scrollY:0
    }
  },
  created(){
    this.probeType = 3;
    this.listenScroll = true;
  },
  props:{
    songs:{
      type:Array,
      default:null
    },
    title:{
      type:String,
      default:""
    },
    bgImg:{
      type:String,
      default:""
    },
    rank: {
        type: Boolean,
        default: false
      }
  },
  computed:{
    bgStyle(){
      return `background-image:url(${this.bgImg})`
    }
  },
  mounted(){
    this.imageHeight = this.$refs.bgImage.clientHeight
    this.$refs.list.$el.style.top =  `${this.imageHeight}px`;
    this.minTranslateY = -this.imageHeight + RESERVED_HEIGHT;
  },
  methods:{
    handlePlayList(playList){
      const bottom = playList.length > 0 ? '60' : '';
      this.$refs.list.$el.style.bottom = `${bottom}px`;
      this.$refs.list.refresh();
    },
    back(){
      this.$router.back();
    },
    scroll(pos){
      this.scrollY = pos.y;
    },
    selectItem(item){//点击歌手的其中一首歌
      this.selectPlay({
        list:this.songs,
        index:item.index
      })
      getplaysongkey(item.item.mid).then((res) => {
        let url =  res ? `http://dl.stream.qqmusic.qq.com/${res}` : undefined    
        this.setPlaylistUrl({
          index:item.index,
          url,
        })
      })
    },
    ...mapActions([
      'selectPlay',
    ]),
    ...mapMutations({
      setPlaylistUrl: 'SET_PLAYLIST_URL'
    }),
  },
  watch:{
    scrollY(newval){
      let translateY = Math.max(this.minTranslateY,newval);
      let scal = 1;
      let zindex = 0;
      let blur = 0;
      const percent = Math.abs(newval/this.imageHeight)
      if(newval > 0){
        scal = 1+percent;
        zindex = 10;
      }else{
        blur = Math.min(20,20+scal)
      }
      this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`;
      if(newval < this.minTranslateY){
        zindex = 10;
        this.$refs.bgImage.style.paddingTop = 0
        this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
        this.$refs.playBtn.style.display = 'none'
      }else{
        this.$refs.bgImage.style.paddingTop = '70%'
        this.$refs.bgImage.style.height = 0
        this.$refs.playBtn.style.display = ''
      }
      console.log(transform);
      this.$refs.bgImage.style[transform] = `scale(${scal})`
      this.$refs.bgImage.style.zIndex = zindex//设置层级
    }
  },
  components:{
    songlist,
    scroll,
    loading
  }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
@import "~commom/stulys/mixin.styl"
.musiclist
  position :fixed;
  width :100%;
  top: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 100;
  .back
    position :absolute;
    left: 6px;
    top: 0;
    z-index: 50;
    .icon-houtui-normal
      display :block
      font-size :$font-size-large-x;
      color :$color-theme;
      padding :10px;
  .title
    position :absolute;
    top: 0;
    left: 10%;
    width :80%;
    text-align center;
    line-height :40px;
    font-size :$font-size-large;
    no-wrap();
    color :$color-text;
    z-index: 40;
  .bg-image
    width: 100%;
    height: 0;
    position: relative;
    padding-top: 70%;
    transform-origin :top;
    background-size :cover;
    .fliter
      position :absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.3);
      top: 0;
      left: 0;
    .play-wrapper
      z-index: 50;
      position :absolute;
      bottom: 20px;
      width :100%
      .playBtn
        width: 135px;
        border :1px solid $color-theme;
        border-radius :100px;
        padding :7px 0;
        text-align :center;
        font-size :0;
        margin :0 auto;
        box-sizing :border-box;
        color :$color-theme;
        .icon-random-normal
          display :inline-block;       
          font-size :$font-size-medium-x;
          margin-right: 6px;
          vertical-align: middle;
        .text
          display :inline-block;
          vertical-align: middle;
          font-size :$font-size-small
  .bg-layer
    background-color: $color-background;
    height :100%;
    position: relative;
  .list
    position :absolute;
    top: 0;
    bottom: 0;
    background:$color-background;
    width :100%;
    .songlist-wrapper
      padding :20px 30px;
</style>